<template>
	<view class="gy-serach">
		<view class="serach-input">
			<image src="/static/icon/password.png" mode=""></image>
			<input type="text" :placeholder="placeholder" v-model="keywords">
		</view>
		<view class="search-btn" @click='search'>
			搜索
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				keywords: ''
			};
		},
		props: {
			placeholder: {
				type: String,
				default: '输入关键字搜索'
			}
		},
		methods: {
			search() {
				if(this.keywords == ''){
					this.$untils.toast({title:"关键字不能为空"});return;
				}
				this.$emit('customSearch',this.keywords);
			}
		}
	}
</script>

<style>
	.gy-serach {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10upx 0;
	}

	.serach-input {
		height: 60upx;
		width: 80%;
		background-color: #F5F5F5;
		border-radius: 50upx;
		display: flex;
		align-items: center;
	}

	.serach-input image {
		width: 40upx;
		height: 40upx;
		margin: 0 10upx;
		padding: 10upx;
	}

	.serach-input input {
		height: 60upx;
		width: 85%;
		padding: 10upx;
	}

	.search-btn {
		width: 15%;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		border-radius: 40upx;
		background-color: #FABD05;
	}
</style>
